<template>
  <div style="border: 1px solid #ccc" class="pr wangEditor">
    <div class="memberList" v-if="memberVisible">
      <h5>群成员</h5>
      <ul v-if="userList.length">
        <li
          @click="insertTagUser(item)"
          style="margin: 3px"
          :key="index"
          v-for="(item, index) in userList"
        >
          <img
            class="userImg"
            loading="lazy"
            :src="
              item.headImg ||
              'https://cdn-image.kapeixi.cn/web/images/headImg.png'
            "
          />
          <span class="ellipsis">{{ item.fullName }}</span>
        </li>
      </ul>
      <p class="empty" v-else>
        没有找到”<em>{{ searchValue }}</em
        >“相关人员
      </p>
    </div>
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="props.mode"
    />
    <Editor
      :style="styles"
      v-model="modelValue"
      :defaultConfig="editorConfig"
      :mode="props.mode"
      @onChange="onChange"
      @customPaste="customPaste"
      @onCreated="handleCreated"
    />
    <a-button
      type="primary"
      size="small"
      :disabled="sendDisabled"
      class="we-send"
      @click="onSend"
      >发送</a-button
    >
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import {
  editorRef,
  modelValue,
  init,
  handlerImageUpload,
  handlerAtUser
} from './wangEditor'
import { computed } from 'vue'

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  mode: {
    type: String,
    default: 'default'
  },
  readOnly: {
    type: Boolean,
    default: false
  },
  /* 高度 */
  height: {
    type: Number,
    default: 200
  },
  /* 最小高度 */
  minHeight: {
    type: Number,
    default: null
  }
})

const emits = defineEmits(['onSend'])

const { styles, editorConfig, toolbarConfig, handleCreated } = init(props)

const { customPaste } = handlerImageUpload(props, editorConfig)

const { memberVisible, insertTagUser, userList, onChange, searchValue } =
  handlerAtUser()

// 发送 按钮禁用
const sendDisabled = computed(() => {
  return modelValue.value.replaceAll(/<(?!img).*?>/g, '') === ''
})

// 发送
const onSend = () => {
  emits('onSend', modelValue.value)
  modelValue.value = ''
}
</script>
<style lang="scss">
.w-e-bar-item-group .w-e-bar-item-menus-container {
  margin-top: 30px;
}
.wangEditor {
  .we-send {
    position: absolute;
    right: 10px;
    margin-top: -30px;
  }
  .w-e-bar-item {
    height: 33px;
  }
  .memberList {
    min-width: 150px;
    max-height: 200px;
    overflow-y: auto;
    /* transform: translateY(-100%); */
    bottom: 270px;
    z-index: 444;
    background: #fff;
    width: -moz-max-content;
    width: max-content;
    padding: 6px;
    position: absolute;
    .empty {
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #ccc;
      em {
        color: #1989fa;
      }
    }
    .userImg {
      width: 30px;
      height: 30px;
      margin-right: 3px;
    }
  }
}
</style>
